<template>
  <!-- form-item会自动劫持原生组件，去除劫持，手动监听变化后调用onFieldChange -->
  <a-form-item
    :label="item.label"
    :name="item.name"
    :rules="item.rules"
    :style="item.style"
    ref="formItem"
    :autoLink="false"
  >
    <!--根据type来显示是控件-->
    <a-input
      v-if="item.type === 'hidden'"
      v-model:value="formObj"
      type="hidden"
    ></a-input>
    <span v-else-if="item.type === 'label'">
      {{ formObj }}
    </span>
    <a-input-password
      v-else-if="item.type === 'password'"
      :disabled="item.disabled"
      v-model:value="formObj"
      autocomplete="new-password"
      :placeholder="item.placeholder || `请输入${item.label}`"
    ></a-input-password>
    <a-switch
      v-else-if="item.type === 'switch'"
      v-model:checked="formObj"
      :disabled="item.disabled"
      :checked-children="item.checkedLabel"
      :checkedValue="item.checkedValue"
      :un-checked-children="item.unCheckedLabel"
      :unCheckedValue="item.unCheckedValue"
      @change="item.onChange"
    />
    <a-select
      v-else-if="item.type === 'select'"
      v-model:value="formObj"
      :placeholder="item.placeholder || `请选择${item.label}`"
      :disabled="item.disabled"
      :optionLabelProp="item.optionLabelProp"
      :options="item.options"
      :filter-option="filterOption"
      :defaultActiveFirstOption="false"
      :mode="item.mode"
      @change="item.onChange"
    >
    </a-select>
    <a-select
      v-else-if="item.type === 'tags'"
      :disabled="item.disabled"
      v-model:value="formObj"
      :placeholder="item.placeholder || `请选择${item.label}`"
      :options="item.options"
      mode="tags"
    >
    </a-select>
    <IconSelect
      v-else-if="item.type === 'icon'"
      :disabled="item.disabled"
      v-model:icon="formObj"
    >
    </IconSelect>
    <a-tree-select
      v-else-if="item.type === 'treeSelect'"
      v-model:value="formObj"
      :placeholder="item.placeholder || `请选择${item.label}`"
      :disabled="item.disabled"
      :tree-data="item.options"
      tree-node-filter-prop="label"
      :fieldNames="item.fieldNames"
      tree-checkable
      show-search
      :multiple="item.multiple"
      :allow-clear="item.allowClear"
      tree-default-expandAll
      treeLine
    >
    </a-tree-select>
    <a-cascader
      v-else-if="item.type === 'cascader'"
      v-model:value="formObj"
      :placeholder="item.placeholder || `请选择${item.label}`"
      :disabled="item.disabled"
      :options="item.options"
      max-tag-count="responsive"
      :show-search="{ filter }"
      :multiple="item.multiple"
      @change="item.onChange"
    />
    <a-input-number
      v-else-if="item.type === 'number'"
      :style="item.style"
      v-model:value="formObj"
      :disabled="item.disabled"
      :placeholder="item.placeholder || `请选择${item.label}`"
      :precision="item.precision"
      :min="item.min"
      :max="item.max"
    />
    <a-date-picker
      v-else-if="item.type === 'date'"
      type="date"
      v-model:value="formObj"
      :placeholder="item.placeholder || `请选择${item.label}`"
      :disabled="item.disabled"
      value-format="YYYY-MM-DD 00:00:00"
    />
    <a-date-picker
      v-else-if="item.type === 'datetime'"
      :disabled="item.disabled"
      v-model:value="formObj"
      type="date"
      :placeholder="item.placeholder || `请选择${item.label}`"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
    />
    <a-textarea
      v-else-if="item.type === 'textarea'"
      :disabled="item.disabled"
      v-model:value="formObj"
      :rows="item.rows"
      :maxlength="item.maxlength"
      :showCount="true"
      type="textarea"
      :placeholder="item.placeholder || `请输入${item.label}`"
    />
    <a-radio-group
      v-else-if="item.type === 'radio'"
      :disabled="item.disabled"
      v-model:value="formObj"
      :options="item.options"
      @change="
        (e) => {
          item.onChange && item.onChange(e.target.value);
        }
      "
    />
    <a-checkbox-group
      v-else-if="item.type === 'checkbox'"
      :disabled="item.disabled"
      v-model:value="formObj"
      :options="item.options"
    >
    </a-checkbox-group>
    <UploadImg v-else-if="item.type === 'image'" v-model:img="formObj" />
    <UploadImgs v-else-if="item.type === 'images'" v-model:imgs="formObj" />
    <UploadFile
      v-else-if="item.type === 'file'"
      v-model:file="formObj"
      :accept="item.accept"
    />
    <UploadFiles
      v-else-if="item.type === 'files'"
      v-model:files="formObj"
      :accept="item.accept"
    />
    <a-input
      v-else="item.type === 'input'"
      v-model:value="formObj"
      :placeholder="item.placeholder || `请输入${item.label}`"
      :disabled="item.disabled"
      allow-clear
    ></a-input>
  </a-form-item>
</template>
<script setup>
import _ from "lodash";
import UploadImg from "./UploadImg.vue";
import UploadImgs from "./UploadImgs.vue";
import UploadFile from "./UploadFile.vue";
import UploadFiles from "./UploadFiles.vue";
import IconSelect from "./IconSelect.vue";
import { ref, watch } from "vue";
import { AutoComplete } from "ant-design-vue";

const props = defineProps(["item", "obj"]);
const emits = defineEmits(["update:obj"]);

const formItem = ref(null);
const formObj = ref(props.obj);

watch(
  () => props.obj,
  (v) => {
    formObj.value = v;
  }
);

watch(
  () => formObj.value,
  (v) => {
    if (v !== props.obj) {
      emits("update:obj", v);
    }
    formItem.value.onFieldChange();
  }
);

const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const filter = (inputValue, path) => {
  return path.some(
    (option) =>
      option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
  );
};
</script>
<style lang="less" scoped>
:deep(.ant-form-item-label) {
  width: 100px;
}
</style>
